<template>
  <div class="comment-list">
    <div class="comment">
      <img :src="avatar" alt="" crossorigin="anonymous" />
      <div class="info-wrapper">
        <div class="info">
          <div class="nickname">
            {{ nickname }}
          </div>
          <div class="star">
            <span>{{ likeCount }}</span>
            <van-icon class="icon" name="good-job-o" @click="() => $emit('likeComment')" />
          </div>
        </div>
        <div class="content">
          <!-- 普通评论 -->
          <span>{{ content }}</span>
          <div class="replay" v-if="mode === 'default'">
            <div class="replay-count"  @click="getReplyCommentList()">
              <div>{{ replayCount }}回复</div>
              <van-icon name="arrow" />
            </div>
            <span>{{ getTime() }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
export default {
  props: {
    // mode 默认模式
    mode: String,
    avatar: String,
    // 昵称
    nickname: String,
    // 点赞数量
    likeCount: Number,
    // 评论内容
    content: String,
    // 时间
    timeStr: String,
    // 回复次数
    replayCount: Number,
    // 评论id
    id: String,
    // 频率是否点赞
    isLiking: Boolean,
    // 作者是否关注
    isFollowed: Boolean,
    // 作者id
    autId: String,
  },
  methods: {
    getTime() {
      return moment(this.timeStr).toNow(true) + "内";
    },
    // 显示回复评论弹出层
    getReplyCommentList() {
      this.$emit("getReplyCommentList");
    },
  },
};
</script>

<style lang="less" scoped>
// language: 语言
.comment {
  display: flex;
  padding: 0 8px;
  margin-top: 8px;
  > img {
    display: block;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    margin-right: 8px;
    margin-top: 2px;
  }
  .info-wrapper {
    flex: 1;
    margin: 8px 0;
    .info {
      display: flex;
      .nickname {
        flex: 1;
        color: #666;
      }
      .star {
        color: #aaa;
        font-size: 14px;
        .icon {
          font-size: 20px;
          margin-left: 4px;
        }
        .icon.active {
          color: #fc6627;
        }
      }
    }
    .content {
      margin: 8px 0;
      .replay {
        margin-top: 8px;
        display: flex;
        align-items: center;
        .replay-count {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 80px;
          height: 30px;
          border-radius: 15px;
          background-color: #f7f8fa;
        }
        span {
          color: #666;
          margin-left: 20px;
          font-size: 15px;
        }
      }
    }
  }
}
</style>